<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>网站管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索与增加区域 -->
    <el-card class="box-card">
        <!-- 搜索与添加区域 -->
        <el-row :gutter="30">
          <el-col :span="4">
            <el-button type="primary" @click="Addpage">添加轮播图</el-button>
          </el-col>
        </el-row>
      </el-card>
    <!-- 内容主体 -->
    <el-table
      :data="sliderList"
      style="width: 100%"
      :row-class-name="rowClass"
      border stripe>
      <el-table-column
        type="index"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="imageName"
        label="图片名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="imageUrl"
        label="图片地址">
      </el-table-column>
      <el-table-column
        label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.id)"
            ></el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 添加窗口 -->
    <el-dialog
      title="添加轮播图"
      :visible.sync="addVisible"
      width="50%">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8888/images/upload"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="image.imageUrl" :src="image.imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureSlider">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderList: [],
      addVisible: false,
      image: {
        imageName: '',
        imageUrl: ''
      }
    }
  },
  created() {
    this.getsliderList()
  },
  methods: {
    async getsliderList() {
      const { data: res } = await this.$axios.get('/images/select')
      this.sliderList = res.data.images
    },
    // 表格样式
    rowClass({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      // 根据ID删除轮播图图片
      async removeById(id) {
        const confirmResult = await this.$confirm('此操作将永久删除该轮播图，是否继续？', '删除轮播图', {
            confirmButtonText: '',
            cancelButtonText: '',
            type: 'warning'
        }).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除 ')
            }
            const { data: res } = await this.$axios.delete('/images/delete/' + id)
            if (res.code !== 200) {
                return this.$message.error('删除失败！ ')
            }
            this.$message.success('删除轮播图成功！ ')
            this.getsliderList()
      },
      Addpage() {
        this.addVisible = true
      },
      // 文件上传成功时的钩子
      handleAvatarSuccess(response, file, fileList) {
        console.dir('response: ' + response)
        console.log(file)
        if (response.code !== 200) {
          return this.$message.error('文件上传失败！请联系管理员 ')
        }
        this.image.imageName = response.data.path
        this.image.imageUrl = response.data.url
      },
      // 上传文件之前的钩子
      beforeAvatarUpload(file) {
      },
      // 将轮播图添加
      async sureSlider() {
        console.log(this.image)
        const { data: res } = await this.$axios.post('/images/add', this.image)
        if (res.code !== 200) {
          return this.$message.error('添加图片失败')
        }
        this.$message.success('添加图片成功')
        this.getsliderList()
        this.addVisible = false
      }
  }
}
</script>

<style lang="less" scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  // 上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
